<template>

<div class="school">
    <div class="box-card">
       <!-- <div  class="title" @click="toggleOpen">
            <span>附件</span>
            <i v-if="progress==='1'"><el-tag type="success">已完善</el-tag></i>
            <i v-if="progress==='0'"><el-tag type="danger">待完善</el-tag></i>
            <div class="head-right">
                <el-button type="text" @click="submit" v-if="!disabled">保存</el-button>
                <span class="toggle" >
                    <i class="el-icon-arrow-up" v-if="open"></i>
                    <i class="el-icon-arrow-down"  v-else></i>
                </span>

            </div>
        </div>-->
        <item-header
                title="附件"
                :open="open"
                :progress="progress"
                :disabled="disabled"
                @submit="submit"
                @toggleOpen="toggleOpen"
                @changeDisabled="changeDisabled"
        />
        <div class="text item" v-if="open">

            <div class="file_wrap">
                <ul>

                    <li @mousedown="file_type=1">
                        <div class="head">
                            <span>高校实验室汇总表</span>
                            &nbsp;&nbsp; <a v-if="role == 2"  href="/download/高校实验室汇总表模版.xls" download="">[ 下载模板 ]</a>
                        </div>
                        <div v-if="disabled &&  data.college_info.file_list_a" >
                            <a target="_block"
                               style="display: block;font-size: 12px;line-height: 20px;"
                               v-for="(item,index) in data.college_info.file_list_a"
                               :href="item.path"
                               :key="index"
                            >
                                {{item.name}}
                            </a>
                            <div v-if="!data.college_info.file_list_a.length" style="color:#999">待上传</div>
                        </div>
                        <el-upload
                                class="upload-demo"
                                action="/common/upload_file"
                                :on-success="handleSuccess"
                                :on-remove="handleRemove"
                                :on-preview="handlePreview"
                                :disabled="disabled"
                                v-if="!disabled"
                                :file-list="data.college_info.file_list_a">
                            <el-button size="small" type="primary" @click="file_type=1" v-if="!disabled">点击上传</el-button>

                        </el-upload>

                    </li>


                    <li @mousedown="file_type=2">
                        
                        <div class="head">
                            <span>高校实验室安全隐患自查台账</span>
                            &nbsp;&nbsp;<a v-if="role == 2" href="/download/高校实验室安全隐患自查台账模版.docx" download="">[ 下载模板 ]</a>

                        </div>
                        <div v-if="disabled && data.college_info.file_list_b" >
                            <a target="_block"
                               style="display: block;font-size: 12px;line-height: 20px;"
                               v-for="(item,index) in data.college_info.file_list_b"
                               :href="item.path"
                               :key="index"
                            >
                                {{item.name}}
                            </a>
                            <div v-if="!data.college_info.file_list_b.length" style="color:#999">待上传</div>
                        </div>
                        <el-upload
                                class="upload-demo"
                                action="/common/upload_file"
                                :on-success="handleSuccess"
                                :on-remove="handleRemove"
                                :on-preview="handlePreview"
                                :disabled="disabled"
                                v-if="!disabled"
                                :file-list="data.college_info.file_list_b">
                            <el-button size="small" type="primary" @click="file_type=2" v-if="!disabled">点击上传</el-button>

                        </el-upload>

                    </li>

                       <li  @mousedown="file_type=3">
                           <div class="head">
                               <span>高校实验室安全管理情况调查表</span>
                               <el-button  v-if="role == 2"  size="small" type="text" @click="exprot"  style=" font-size: 16px; font-weight: 400;" >[ 在线生成 ]</el-button>
                           </div>
                           <div v-if="disabled && data.college_info.file_list_c" >
                               <a target="_block"
                                  style="display: block;font-size: 12px;line-height: 20px;"
                                  v-for="(item,index) in data.college_info.file_list_c"
                                  :href="item.path"
                                  :key="index"
                               >
                                   {{item.name}}
                               </a>
                               <div v-if="!data.college_info.file_list_c.length" style="color:#999">待上传</div>
                           </div>
                            <el-upload
                                   class="upload-demo"
                                   action="/common/upload_file"
                                   :on-success="handleSuccess"
                                   :on-remove="handleRemove"
                                   :on-preview="handlePreview"
                                   :disabled="disabled"
                                   v-if="!disabled"
                                   :file-list="formUnit.college_info.file_list_c">
                               <el-button size="small" type="primary" @click="file_type=3" v-if="!disabled">点击上传</el-button>

                           </el-upload>

                       </li>
                </ul>
            </div>

        </div>
    </div>

</div>


</template>

<script>
    import itemHeader from './item-header'
    export default {
        components:{itemHeader},
        name: "item1",
        props:['formUnit', 'is_disabled','expend'],

        watch: {
            formUnit(val) {
                this.data = this.formUnit;
            }
        },
        data(){
            return {
                disabled:this.is_disabled,
                complete:false,

                 data:this.formUnit,
                open:this.expend,
                file_type:1,
                index:0,

            }
        },
        computed:{
            progress(){
                return this.data.college_info.progress[this.index]
            },
            role(){
                let role_name =this.$store.state.userInfo.role_name || ''

                let role=0

                //0：管理员，1：专家，2高校
                if (role_name.indexOf("管理员") >-1 || role_name.indexOf("教育部") > -1){
                    role = 0
                }else if (role_name.indexOf("高校")>-1) {
                    role = 2
                }else{
                    role = 1
                }
                return role
            }
        },
        methods:{
            toggleOpen(){
                console.log(this.open)
                this.open = !this.open
            },
            changeDisabled(val){
                this.disabled = val
            },
            submit(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation()
                if(this.data.college_info.file_list_a.length < 1 || this.data.college_info.file_list_b.length < 1 || this.data.college_info.file_list_c.length < 1 ){
                    this.$message.error("请完善附件");
                    return false
                } else {
                    this.$emit('itemSave',this.data,this.index)
                    this.disabled = true
                    this.$forceUpdate()
                }

            },
            exprot(){
                this.$emit('adminExprot')
            },
            getFileList(){

                let file_list=[]
                switch (this.file_type) {
                    case 1:
                        if (!this.data.college_info.file_list_a){
                            this.formUnit.college_info.file_list_a =[]
                        }
                        file_list = this.data.college_info.file_list_a
                        break
                    case 2:
                        if (!this.data.college_info.file_list_b){
                            this.formUnit.college_info.file_list_b =[]
                        }
                        file_list = this.data.college_info.file_list_b
                        break
                    case 3:
                        if (!this.data.college_info.file_list_c){
                            this.formUnit.college_info.file_list_c =[]
                        }
                        file_list = this.data.college_info.file_list_c
                        break
                }
                return file_list

            },
            handleRemove(file, fileList) {

                let index =0
                let file_list = this.getFileList()
                file_list.forEach((item,n) =>{
                    if (item.id ===file.id) {
                        index = n
                    }
                })

                file_list.splice(index, 1)

            },
            handleSuccess(res, file, fileList){

                let file_list = this.getFileList()
                file_list.push({
                    id:JSON.parse(res.datas).id,
                    name:file.name,
                    path:JSON.parse(res.datas).file_url
                })
            },
            handlePreview(file){
                window.open(file.path)
            }
        }
    }
</script>

<style scoped>
    .toggle{
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        cursor: pointer;
    }
    .title:hover{
        background: #e6e6e6;

    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right:20px;
        top:1px;
    }
    .file_wrap{
        width:100%;
        min-height: 120px;

    }
    .file_wrap .head{
        margin-bottom:10px;
    }
    .file_wrap .head span{
        font-size:15px;
        color: #333;
    }
    .file_wrap .title{
        font-size:16px;
        color:#333;
    }
    .file_wrap ul{
        padding:0;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .file_wrap ul li{
        border-right:1px solid #ddd;
        padding:0 20px;
        list-style: none;
        width: 25%;
        margin-right:4%;
        float:left;
    }
</style>
